<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, user-scalable=no">
		<script>
			var designW = 750,
				designH = 1346;
			var windowW = window.innerWidth,
				windowH = window.innerHeight;
			var scaleX = windowW / designW,
				scaleY = windowH / designH;
			var scale = Math.min(scaleX, scaleY);
			// var htmlEle = document.querySelector('html');
			// htmlEle.style.transform = 'scale(' + scale + ')';
			var metaTags = document.getElementsByTagName('meta');
			for (var i = 0; i < metaTags.length; i++) {
				// 判断当前元素是否为 viewport 相关的 meta 标签
				if (metaTags[i].getAttribute("name") === "viewport") {
					// 设置新的 initial-scale 值
					metaTags[i].setAttribute(
						"content",
						"width=device-width, shrink-to-fit=no, user-scalable=no, initial-scale=" + scale
					);
					break; // 只需修改第一个符合条件的 meta 标签，因此跳出循环
				}
			}
		</script>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="renderer" content="webkit">
		<title>详情</title>
		<meta name="description" content="详情" />
		<meta name="keywords" content="" />
		<link rel="stylesheet" href="./picker.css">
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			body {
				padding: 0 0;
				font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
				user-select: none;
				-webkit-user-select: none;
				display: flex;
				flex-direction: column;
				align-items: center;
				background: #fff;
			}

			.mainBox {
				width: 100%;
				max-width: 750px;
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.mainBox .imageRow {
				width: 100%;
				background: linear-gradient(90deg, #FD610C 0%, #F97500 100%);
			}

			.mainBox .imageRow img {
				width: 100%;
			}

			.mainBox .priceRow {
				width: 100%;
				height: 96px;
				padding: 28px;
				background: linear-gradient(90deg, #FD610C 0%, #F97500 100%);
				display: flex;
				flex-direction: row;
				align-items: center;
			}

			.mainBox .priceRow .left {
				display: flex;
				flex-direction: row;
				align-items: baseline;
			}

			.mainBox .priceRow .left .price {
				font-weight: bold;
				font-size: 32px;
				color: #FEFEFE;
				display: flex;
				flex-direction: row;
				align-items: baseline;
			}

			.mainBox .priceRow .left .price span {
				font-size: 48px;
			}

			.mainBox .priceRow .left .flow {
				margin: 0 8px 8px;
				width: 176px;
				height: 42px;
				background: #FFFFFF;
				border-radius: 4px;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				font-weight: bold;
				font-size: 28px;
				color: #FC650A;
			}

			.mainBox .priceRow .free {
				margin-left: auto;
				font-weight: 500;
				font-size: 28px;
				color: #FEFEFE;
			}

			.mainBox .nameRow {
				padding: 28px;
				width: 100%;
				font-weight: bold;
				font-size: 32px;
				color: #000000;
			}

			.mainBox .lineRow {
				margin-top: 12px;
				width: 750px;
				height: 4px;
				background: #F7F7F7;
			}

			.mainBox .titleRow {
				width: 100%;
			}

			.mainBox .titleRow img {
				width: 100%;
			}

			.mainBox .detailRow {
				width: 100%;
				padding-bottom: 158px;
				display: flex;
				flex-direction: column;
			}

			.mainBox .detailRow img {
				width: 100%;
			}

			.mainBox .fixRow {
				position: fixed;
				left: 0;
				bottom: 0;
				z-index: 2;
				width: 100%;
				height: 128px;
				background: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.mainBox .fixRow .button {
				width: 710px;
				height: 96px;
				background: linear-gradient(90deg, #FD5F00 0%, #FF371B 100%);
				border-radius: 36px;
				border: none;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: bold;
				font-size: 36px;
				color: #FFFFFF;
			}



			.addr-mask {
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: rgba(0, 0, 0, 0.5);
				z-index: 899;
				opacity: 0;
				pointer-events: none;
				transition: opacity 0.3s ease;
			}

			.addr-mask.show {
				opacity: 1;
				pointer-events: auto;
			}

			.addr-container {
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				background: #fff;
				border-radius: 16px 16px 0 0;
				box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.1);
				transform: translateY(100%);
				transition: transform 0.3s ease;
				z-index: 900;
			}

			.addr-container.show {
				transform: translateY(0);
			}

			.addr-header {
				display: flex;
				flex-direction: row;
				justify-content: center;
				padding: 20px;
				border-bottom: 1px solid #eee;
			}

			.addr-title {
				padding-left: 80px;
				width: calc(100% - 80px);
				font-weight: 500;
				font-size: 26px;
				line-height: 40px;
				text-align: center;
			}

			.addr-close {
				width: 80px;
				height: 40px;
				background: none;
				border: none;
				font-size: 60px;
				color: #FD5F00;
				line-height: 40px;
				text-align: center;
			}

			.addr-content {
				display: flex;
				height: max-content;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.addr-content .fuwu {
				padding: 20px 40px;
				width: 100%;
			}

			.addr-content .addrBox {
				padding: 10px 40px;
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.addr-content .addrBox .addrRow {
				padding: 12px 0;
				width: 100%;
				height: 86px;
				border-bottom: 1px solid #F0F0F0;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}

			.addr-content .addrBox .addrRow:nth-child(5) {
				border-bottom: none;
			}

			.addr-content .addrBox .addrRow .rowName {
				width: 128px;
				font-weight: 400;
				font-size: 24px;
				color: #545458;
				line-height: 2;
			}

			.addr-content .addrBox .addrRow .rowInput {
				width: calc(100% - 128px);
				position: relative;
			}

			.addr-content .addrBox .addrRow .rowInput>input,
			.addr-content .addrBox .addrRow .rowInput>.select-btn>input {
				padding: 0 10px;
				width: calc(100% - 20px);
				border: none;
				font-weight: 400;
				font-size: 24px;
				line-height: 2;
			}

			.addr-content .addrBox .addrRow .rowInput>input:focus,
			.addr-content .addrBox .addrRow .rowInput>input:active,
			.addr-content .addrBox .addrRow .rowInput>.select-btn>input:focus,
			.addr-content .addrBox .addrRow .rowInput>.select-btn>input:active {
				border: none;
			}


			.addr-content .addrBox .addrRow .rowInput>.select-btn {
				border: none;
				padding: 0;
				width: 100%;
				height: 100%;
				border: none;
			}

			.addr-content .addrBox .addrRow .rowInput>.select-btn::after {
				width: 12px;
				height: 12px;
				top: 16px;
			}

			.addr-content .addrBox .applyBtn {
				margin: 28px 0 36px 0;
			}

			.addr-content .addrBox .applyBtn .button {
				width: 710px;
				height: 96px;
				background: linear-gradient(90deg, #FD5F00 0%, #FF371B 100%);
				border-radius: 36px;
				border: none;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: bold;
				font-size: 36px;
				color: #FFFFFF;
			}
		</style>
	</head>
	<body>
		<div class="mainBox" id="app">
			<div class="imageRow">
				<img :src="proDetail.thumb_image" width="100%" height="100%" alt="" />
			</div>
			<div class="priceRow">
				<div class="left">
					<div class="price">包年<span>{{proDetail.sales_price}}</span>元</div>
					<div class="flow">月享1500G</div>
				</div>
				<div class="free">全国包邮</div>
			</div>
			<div class="nameRow">
				{{proDetail.product_name}}
			</div>
			<div class="lineRow"></div>
			<div class="titleRow">
				<img src="./detailtit.jpg" width="100%" height="100%" alt="" />
			</div>
			<div class="detailRow">
				<img v-for="imgUrl in proDetailImages" :key="imgUrl" :src="imgUrl" width="100%" alt="" />
			</div>
			<div class="fixRow">
				<button type="button" class="button" id="onAddrBtn">
					立即办理
				</button>
			</div>
		</div>

		<div class="addr-mask" id="addrMask"></div>
		<div class="addr-container" id="addrContainer">
			<div class="addr-header">
				<div class="addr-title">收件信息</div>
				<button class="addr-close" id="addrClose">&times;</button>
			</div>
			<div class="addr-content" id="addrContent">
				<img class="fuwu" src="./fuwu.png" width="100%" height="100%" alt="" />
				<div class="addrBox">
					<div class="addrRow">
						<div class="rowName">收件人:</div>
						<div class="rowInput">
							<input id="username" type="text" placeholder="请输入收件人" autoComplete="false">
						</div>
					</div>
					<div class="addrRow">
						<div class="rowName">联系方式:</div>
						<div class="rowInput">
							<input id="phone" type="tel" placeholder="请输入联系方式" autoComplete="false">
						</div>
					</div>
					<div class="addrRow">
						<div class="rowName">所在地区:</div>
						<div class="rowInput">
							<div id="selectBtn" class="select-btn">
								<input id="cityPicker" type='text' placeholder='请选择省市区' readonly />
							</div>
						</div>
					</div>
					<div class="addrRow">
						<div class="rowName">详细地址:</div>
						<div class="rowInput">
							<input id="address" type="text" placeholder="请输入详细地址" autoComplete="false">
						</div>
					</div>
					<div class="applyBtn">
						<button type="button" class="button" id="onApplyBtn">
							立即办理
						</button>
					</div>
				</div>

			</div>
		</div>

		<div class="picker-mask" id="pickerMask"></div>
		<div class="picker-container" id="pickerContainer">
			<div class="picker-header">
				<div class="picker-title">选择省市区</div>
				<button class="picker-close" id="pickerClose">完成</button>
			</div>
			<div class="picker-content" id="pickerContent"></div>
		</div>

		<script src="https://code.jquery.com/jquery-1.12.4.min.js"> </script>
		<script src="vue@v2.7.16.js"></script>
		<script src="cities.js"></script>
		<script src="picker.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					proDetail: {},
					proDetailImages: '',
				},
				methods: {
					initProDetail: function() {
						const self = this;
						$.ajax({
							url: "https://wkh.wokahui.cn/api/ad/get_product",
							type: "GET",
							dataType: "json",
							timeout: 6000,
							beforeSend: function(xhr) {
								// 可选，发送请求前执行（如添加请求头、显示加载动画）
								console.log("准备发送请求...");
							},
							success: function(response) {
								// 必需，请求成功时执行（response 是服务器返回的数据）
								console.log("请求成功：", response);
								if (response.code == 0 && response.data && response.data.id) {
									self.proDetail = response.data;
									self.proDetailImages = response.data.details_images.split(',');
								} else {
									layer.msg(response.msg || "查询产品出错", {
										title: '温馨提示',
										time: 1500
									})
								}
							},
							error: function(xhr, status, error) {
								// 可选，请求失败时执行（如网络错误、服务器错误）
								console.log("请求失败：", status, error);
							},
							complete: function(xhr, status) {
								// 可选，请求完成后执行（无论成功或失败，如隐藏加载动画）
								console.log("请求结束");
							}
						});
					}
				}
			});

			let username, phone, city, adderess;
			$(document).ready(function() {
				app.initProDetail();

				const addrMask = document.getElementById('addrMask');
				const addrClose = document.getElementById('addrClose');
				const addrContainer = document.getElementById('addrContainer');
				const onAddrBtn = document.getElementById('onAddrBtn');
				const onApplyBtn = document.getElementById('onApplyBtn');
				// 事件监听
				onAddrBtn.addEventListener('click', showAddr);
				addrClose.addEventListener('click', hideAddr);
				addrMask.addEventListener('click', hideAddr);
				onApplyBtn.addEventListener('click', onOrder);

			});

			function showAddr() {
				addrMask.classList.add('show');
				addrContainer.classList.add('show');
				$("html").css("overscroll-behavior", "none");
			}

			function hideAddr() {
				addrMask.classList.remove('show');
				addrContainer.classList.remove('show');
				$("html").css("overscroll-behavior", "auto");
			}

			function onOrder() {
				console.log('onOrder');
				username = document.getElementById("username").value;
				phone = document.getElementById("phone").value;
				city = document.getElementById("cityPicker").value;
				address = document.getElementById("address").value;
				console.log(username, phone, city, address);
				if (!username) {
					layer.msg('请输入收件人!', {
						title: '温馨提示',
						time: 1500
					})
					return;
				}
				if (!phone) {
					layer.msg('请输入联系方式!', {
						title: '温馨提示',
						time: 1500
					})
					return;
				}
				const regex = /^1[3-9]\d{9}$/; // 中国大陆手机号码的正则表达式
				if (!regex.test(phone)) {
					layer.msg('请检查联系方式!', {
						title: '温馨提示',
						time: 1500
					})
					return;
				}
				if (!city) {
					layer.msg('请输入省市区!', {
						title: '温馨提示',
						time: 1500
					})
					return;
				}
				if (!address) {
					layer.msg('请输入详细地址!', {
						title: '温馨提示',
						time: 1500
					})
					return;
				}
				const self = this;
				$.ajax({
					url: "https://wkh.wokahui.cn/api/ad/put_order",
					type: "POST",
					dataType: "json",
					data: {
						realname: username,
						tel: phone,
						address: `${city}${address}`,
						openid: 'o8l756P0U3LGRNYP8tQdrBCdWECY'
					},
					timeout: 6000,
					beforeSend: function(xhr) {
						// 可选，发送请求前执行（如添加请求头、显示加载动画）
						console.log("准备发送请求...");
					},
					success: function(response) {
						// 必需，请求成功时执行（response 是服务器返回的数据）
						console.log("请求成功：", response);
						if (response.code == 0 && response.data && response.data.id) {
							//     "realname": "ces",
							//     "tel": "17712341234",
							//     "address": "北京市北京市东城区12314",
							//     "openid": "o8l756P0U3LGRNYP8tQdrBCdWECY",
							//     "product_id": 45,
							//     "package_id": 41,
							//     "account_id": 6,
							//     "user_id": 1,
							//     "from_class": 8,
							//     "order_no": "1320251030120853635539",
							//     "order_amount": 199,
							//     "pay_amount": 199,
							//     "id": "8541"
							onPaying(response.data.id);
						} else {
							layer.msg(response.msg || "下单出错", {
								title: '温馨提示',
								time: 1500
							})
						}
					},
					error: function(xhr, status, error) {
						// 可选，请求失败时执行（如网络错误、服务器错误）
						console.log("请求失败：", status, error);
					},
					complete: function(xhr, status) {
						// 可选，请求完成后执行（无论成功或失败，如隐藏加载动画）
						console.log("请求结束");
					}
				});
			}

			function onPaying(id) {
				//调起支付
				const self = this;
				$.ajax({
					url: "https: //wkh.wokahui.cn/api/ad/pay_order",
					type: "POST",
					dataType: "json",
					data: {
						id,
						openid: 'o8l756P0U3LGRNYP8tQdrBCdWECY'
					},
					timeout: 6000,
					beforeSend: function(xhr) {
						// 可选，发送请求前执行（如添加请求头、显示加载动画）
						console.log("准备发送请求...");
					},
					success: function(response) {
						// 必需，请求成功时执行（response 是服务器返回的数据）
						console.log("请求成功：", response);
						if (response.code == 0) {
							callpay(res.data);
						} else {
							layer.msg(response.msg || "下单出错", {
								title: '温馨提示',
								time: 1500
							})
						}
					},
					error: function(xhr, status, error) {
						// 可选，请求失败时执行（如网络错误、服务器错误）
						console.log("请求失败：", status, error);
					},
					complete: function(xhr, status) {
						// 可选，请求完成后执行（无论成功或失败，如隐藏加载动画）
						console.log("请求结束");
					}
				});
			}

			function jsApiCall(data) {
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						"appId": data.appId, //公众号名称，由商户传入
						"timeStamp": data.timeStamp, //时间戳，自1970年以来的秒数
						"nonceStr": data.nonceStr, //随机串
						"package": data.package,
						"signType": data.signType, //微信签名方式：
						"paySign": data.paySign //微信签名
					},
					function(res) {
						console.log(res);
						if (res.err_msg == "get_brand_wcpay_request:ok") {
							// 使用以上方式判断前端返回,微信团队郑重提示：
							//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
							window.location.href = './complete?phone=' + phone_number
						} else {}

					}
				);
			}

			function callpay(data) {
				if (typeof WeixinJSBridge == "undefined") {
					if (document.addEventListener) {
						document.addEventListener('WeixinJSBridgeReady', jsApiCall(), false);
					} else if (document.attachEvent) {
						document.attachEvent('WeixinJSBridgeReady', jsApiCall());
						document.attachEvent('onWeixinJSBridgeReady', jsApiCall());
					}
				} else {
					jsApiCall(data);
				}
			}
		</script>

	</body>
</html>